<template>
	<view class="safe-container">
		<view class="safe-content">
			<view class="sate-item">
				<view class="item-left">旧密码<text>*</text></view>
				<view class="item-right"><input v-model="oldPassword" placeholder-style="color:#999;font-size:26rpx" placeholder="请输入旧密码"></view>
			</view>
			<view class="sate-item">
				<view class="item-left">新密码<text>*</text></view>
				<view class="item-right"><input v-model="newPassword" placeholder-style="color:#999;font-size:26rpx" placeholder="请输入新密码"></view>
			</view>
			<view class="sate-item">
				<view class="item-left">确认新密码<text>*</text></view>
				<view class="item-right"><input v-model="newPassword2" placeholder-style="color:#999;font-size:26rpx" placeholder="请确认新密码"></view>
			</view>
			<view class="sate-item2">密码必须6-12个字符，而且同时包含字母和数字。</view>
		</view>
		<view class="btn" @click="handleConfirm">确认修改</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newPassword:'',
				newPassword2:'',
				oldPassword:''
			}
		},
		methods:{
			handleConfirm() {
				if(this.oldPassword == '') {
					return this.$refs.uToast.show({
						title: '请输入旧密码'
					})
				}
				if(this.newPassword == '' || this.newPassword.length < 6) {
					return this.$refs.uToast.show({
						title: '请输入新密码'
					})
				}
				if(this.newPassword2 == '' || this.newPassword.length < 6) {
					return this.$refs.uToast.show({
						title: '请再次输入新密码'
					})
				}
				if(this.newPassword != this.newPassword2 ) {
					return this.$refs.uToast.show({
						title: '两次密码输入不一致'
					})
				}
				let params = {
					newPassword:this.newPassword,
					oldPassword:this.oldPassword
				}
				this.$u.api.exchangePassword(params)
					.then(res => {
						console.log(res)
						if(res.code == 200) {
							this.$refs.uToast.show({
								title: '修改密码成功,请重新登录！'
							})
							setTimeout(() => {
								uni.reLaunch({
									url:'../Login/Login'
								})
							},1200)
						}
					})
					.catch(err => {
						console.log(err)
						this.$refs.uToast.show({
							title: '密码修改失败'
						})
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.safe-container{
		.safe-content{
			.sate-item2{
				color: #999;
				font-size: 25rpx;
				width: 100%;
				text-align: left;
				padding: 20rpx;
			}
			.sate-item{
				padding: 30rpx  20rpx;
				background-color: #fff;
				border-bottom: 1px solid #f4f1f1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.item-left{
					color: #333;
					font-size: 28rpx;
					text{
						color: #DD524D;
					}
				}
				
				
				.item-right{
					input{
						text-align: right;
					}
				}
			}
		}
		.btn{
			width: 600rpx;
			height: 80rpx;
			border-radius: 40rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			background-color: #007AFF;
			margin: 100rpx auto;
		}
	}
</style>
